<template>
    <div>
        <div class="background">
            <img :src=userD.avatar width="100%" height="100%" alt="" />
        </div>
       <div>
           <!--    顶部搜索与分享  -->
           <van-row style="margin-top: -12.5%;">
               <van-col span="0" style="margin-top: 4%" @click="onClickleft"><van-icon size="28" name="arrow-left" /></van-col>
<!--               <div style="display:inline-block;margin-top: 4%;margin-left: 75%" @click="shareClick">
                   <van-col span="0" ><van-icon size="25" name="share-o" /></van-col>
                   <van-col span="0" style="margin-left: 5px"><van-icon size="28" name="ellipsis" /></van-col>
               </div>-->
           </van-row>
           <van-share-sheet
                   v-model="showShare"
                   title="立即分享给好友"
                   :options="options"
                   @select="onSelect"
           />
       </div>
        <div style="height: 500px;margin-top:35%;z-index: 10">
            <div style="position: relative;">
                <span style="position: absolute;top: -30px;left: 10px;">
                    <van-image
                            round
                            width="5rem"
                            height="5rem"
                            :src=userD.avatar
                    />
                </span>
                <span style="position: absolute;left: 100px;;margin-top: 10px">
                    <ul>
                        <li style="font-weight: 600">{{subscribeNumber}}</li>
                        <li >关注</li>
                    </ul>
                </span>

                <span style="position: absolute;left: 150px;margin-top: 10px">
                     <ul>
                        <li style="font-weight: 600">{{fansNumber}}</li>
                        <li>粉丝</li>
                    </ul>
                </span>
                <div v-if="ifSubscribe=='false'">
                <span @click="subscribe" style="width: 80px;height: 30px;border-radius:15px;background-color: yellow;z-index: 11;position: absolute;left: 250px;top: 15px">
                       <span style="font-weight: 600;font-size: 20px;position: absolute;top: 5px;left: 15px">+</span>&nbsp;&nbsp;
                        <span style="font-size: 15px;font-weight: 600;position: absolute;top: 5px;left: 35px">关注</span>
                </span>
                </div>

                <div v-else-if="ifSubscribe=='true'">
                     <span @click="unSubscribe" style="width: 80px;height: 30px;border-radius:15px;background-color: yellow;z-index: 11;position: absolute;left: 250px;top: 15px">
                       <span style="font-weight: 600;font-size: 20px;position: absolute;top: 5px;left: 15px">+</span>&nbsp;&nbsp;
                        <span style="font-size: 15px;font-weight: 600;position: absolute;top: 5px;left: 35px">取关</span>
                    </span>
                </div>

            </div>
<!--            介绍-->
            <div style="position: absolute;top: 265px;left: 15px">
                <ul>
                    <li>
                        <ul>
                            <li style="font-weight: 600;font-size: 20px">{{userD.username}}</li>
                            <li style="margin-top: 5px">
                                <span style="font-weight: 600;background-color: blue;color: white;display: inline-block;width: 60px;text-align: center">鱼小铺</span>
                                <span style="font-weight: 600;background-color: #39a9ed;color: blue;display: inline-block;width: 140px;text-align: center">影视会员代理人</span>
                            </li>
                        </ul>
                    </li>
                    <li style="margin-top: 20px;font-size: 12.5px;font-weight: 500">
                        ①本店铺为咸鱼官方卡券合作商家，芝麻信用780+<br>
                        ②所有充值均为正规，直充你账户!<br>
                        ③关注我，不迷路!不定期粉丝抽奖赠送会员~真诚做人，踏实做事。承蒙厚爱，感谢关注!<br>
                        90后·双子座·华南师范大学<br>
                        芝麻信用良好<br>
                        自由职业行业·创始人<br>
                        喜欢宠物、运动、音乐、娱乐、居家<br>
                    </li>
                </ul>
            </div>
<!--            分割线-->
            <div style="width: 100%;height: 2px;background-color:#F2F2F2;position: absolute;top: 490px"></div>
            <div style="position: absolute;top: 500px;left: 20px">
                <div style="font-weight: 600;font-size: 15px">我的宝贝</div>
              <div style="margin-top: 10px">
                  <span v-for="item in bookD">
                      <span>
                          <ul style="display: inline-block">
                              <li>
                                   <van-image
                                           width="150"
                                           height="150"
                                           :src=item.bookimg
                                   />
                              </li>
                              <li>
                                  <span style="display: inline-block;font-weight: 600">{{item.bookname}}</span>
                                  <span style="display: inline-block;color:red;margin-left: 10px;font-size: 18px">￥{{item.bookprice}}</span>
                                  <span style="display: block;height: 10px"></span>
                              </li>
                          </ul>
                 </span>
                  <span style="display:inline-block;width: 20px"></span>
                  </span>
              </div>
            </div>
        </div>
    </div>

</template>

<script>
    import {Toast} from "vant";

    export default {
        name: "YongHuDetail",
        data(){
            return{
                userId:"",
                //用户信息
                userD:{},
                //商品信息
                bookD:{},
                loading: false,
                finished: false,
                showShare:false,
                subscribeNumber: 0,
                fansNumber: 0,
                //分享
                options: [
                    [
                        { name: '复制链接', icon: 'link' },
                    ],
                ],
                ifSubscribe: '',
                user: this.$store.state.userinfo.user!=null?this.$store.state.userinfo.user.user.username:'',
            }
        },
        methods:{
            onLoad() {
                // 异步更新数据
                // setTimeout 仅做示例，真实场景中一般为 ajax 请求
                setTimeout(() => {
                    // 加载状态结束
                    this.loading = false;
                    // 数据全部加载完成
                    this.finished = true;

                }, 100);
            },
            onSelect() {
                Toast("复制成功");
                this.seccendCopy();
                this.showShare = false;
            },
            shareClick(){
                var  _this= this;
                _this.showShare=true
            },
            //查询用户信息
            selectUserDetail(){
                var _this = this;
                _this.axios({
                    method:"get",
                    url:"/personD/getUserD/"+_this.userId
                }).then(resp=>{
                     this.userD= resp.data.data.userD
                    _this.ifSubscribeFunc();
                    _this.subscribeNum();
                    _this.fansNum();
                })
            },
            //查询该用户的发布的商品信息
            getUserBook(){
                this.axios({
                    method:"get",
                    url:"/personD/getUserBook/"+this.userId
                }).then(resp=>{
                    this.bookD= resp.data.data.bookD
                })
            },
            subscribe(){
                var _this = this;
                _this.axios({
                    method: "get",
                    url: "/book/subscribe?username="+_this.user+"&name="+_this.userD.username
                }).then(function () {
                    _this.ifSubscribe = 'true';
                    // console.log(_this.bookDetail.userName);
                    // alert('关注成功')
                })
            },
            unSubscribe(){
                var _this = this;
                _this.axios({
                    method: "get",
                    url: "/book/unSubscribe?username="+_this.user+"&name="+_this.userD.username
                }).then(function () {
                        _this.ifSubscribe = 'false';
                    }
                )
            }
            ,
            //查询关注数
            subscribeNum(){
                var _this = this;
                _this.axios({
                    method: "get",
                    url: "/subscribeNum?username="+_this.userD.username,
                }).then(resp=>{
                    _this.subscribeNumber = resp.data.data.subscribeNum;
                    console.log('subscribeNum: '+_this.subscribeNumber);
                })
            },
            //查询粉丝数
            fansNum(){
                var _this = this;
                _this.axios({
                    method: "get",
                    url: "/fansNum?username="+_this.userD.username,
                }).then(resp=>{
                    _this.fansNumber = resp.data.data.fansNum;
                })
            },
            //获取关注状态
            ifSubscribeFunc(){
                var _this = this;
                _this.axios({
                    method: "get",
                    url: "/book/ifSubscribe?username="+_this.user+"&name="+_this.userD.username
                }).then(function (resp) {
                        _this.ifSubscribe = resp.data.data.ifSub2;
                        console.log('user: '+_this.user);
                        console.log('duifang: '+_this.userD.username);
                        console.log('ifSubscribe: '+_this.ifSubscribe);
                    }
                );
            }
        },
        setup(){
            const onClickleft = () =>history.back();
            return {
                onClickleft,
            };
        },
        mounted() {
            var _this=this;
            //接收用户id
            _this.userId=JSON.parse(sessionStorage.getItem("userId"));
            //获取用户信息
            _this.selectUserDetail();
            //获取用户信息
            _this.getUserBook();


        },
    }
</script>

<style scoped>
    .background {
        left: 0;
        top: 0;
        width:100%;
        height:30%;  /**宽高100%是为了图片铺满屏幕 */
        z-index:-1;
        position: absolute;
    }
    li{
        list-style: none;
    }
</style>